<template>
  <div class="content">
    <navBar :navBar="navBar" :callback="godetail"></navBar>
    <div class="contentInner" v-if="false">
      <div class="tishi">
        <p>1：{{$t('因为在线支付接口不稳定，目前仅支持线下转账充值！')}}</p>
        <p>
          2：{{$t('请如实填写实际转账金额，否则可能导致系统审核无法通过，影响充值进度。')}}
        </p>
      </div>
      <div class="title">{{$t('请选择以下充值通道')}}</div>
      <div class="boxs">
        <div class="onebox" @click="go('USDT')">
          <div class="boxname">
            <img
              src="../../assets/images/zichan/usdt.png"
              alt=""
              class="logo"
            />
            <span>USDT</span>
          </div>
          <div class="buy"></div> 
        </div>
		
		<div class="onebox" @click="kefu()">
		  <div class="boxname">
		    <img
		      src="../../assets/images/zichan/yhk.png"
		      alt=""
		      class="logo"
		    />
		    <span>Bank</span>
		  </div>
		  <div class="buy"></div> 
		</div>
		
      </div>
     
    </div>
	<div class="top">
		<div class="one">
			<div class="one1">当前余额（元)</div>
			<div class="one2">￥<span>{{zichanlist.total}}</span></div>
			<!-- <div class="one2">折合USDT {{Number(zichanlist.total) / Number(info.U_money)}}</div> -->
			<!-- parseFloat(numStr.replace(',', '')) -->
			<div class="one2">折合USDT {{zh()}}</div>
		</div>
		<div class="two">
			<div class="two1">
				<!-- <div>当前USDT汇率：{{info.U_money}}</div> -->
				<div>当前USDT汇率：{{config.usdt_huilv}}</div>
				<div>1USDT={{config.usdt_huilv}}RMB</div>
			</div>
			<div class="two2">
				<div :class="type == 1 ? 'xuanzhong':''" @click="type = 1">银行卡</div>
				<div :class="type == 2 ? 'xuanzhong':''" @click="type = 2">USDT</div>
			</div>
			<div class="two2">
				<span>￥</span>
				<input v-model="jine" type="text" placeholder="请输入金额">
			</div>

			<div class="red" style="color:#FFF;font-size: 0.4375rem;margin: 0.46875rem;">折合<span>{{ sj() }}</span></div>
		</div>
		
		<div class="btns" @click="sub()">提交充值</div>
		<div class="tips">
			
			<div class="red">温馨提示:</div>
			<div class="tipscon">提交充值后，请点击首页快捷充值联系在线客服！</div>
		</div>
	</div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("充值"),
        close: false,
        btn: this.$t("充值明细"),
      },
	  config:[],
	  
	  type:1,
	  jine:'',
	  info:[],
	  zichanlist:[]
    };
  },
  mounted() {
	  $postAxios(api.getService, {}, (res) => {
	    this.config = res.data;	
		this.kefu_url = res.data.kefu_url;
		
	  });
	  
	  this.getinfo()
	  this.getzichanlist()
  },

  methods: {
	sj(){
	
		// return this.jine;
		if(this.type==2){
			// 相反
			// 如果充值的是BANK 则他到账的时候要计入汇率
			if(this.jine){
			
				return ((this.jine/this.config.usdt_huilv)).toFixed(2)
				
				
			}else{
				return 0;
			}
	
		}else{
			if(this.jine){
				return parseFloat(this.jine).toFixed(2)
			}else{
				return '';
			}
		}
		
	},
	zh(){
		let str = this.zichanlist.total;
		if(str){
			if (str.indexOf(",") !== -1) {
		console.log("字符串包含逗号");
		return (parseFloat(this.zichanlist.total.replace(',','')) / Number(this.config.usdt_huilv)).toFixed(2)
		} else {
			console.log("字符串不包含逗号");
			return (Number(this.zichanlist)/ Number(this.config.usdt_huilv)).toFixed(2)
		}
		}
		
	},
	  getinfo(){
		  $postAxios(api.getUserInfo, {}, res => {
		  	if (res.code == 0) {
		  		this.info = res.data;
		  	} else {
		  		this.$toast(this.$t(res.msg));
		  	}
		  });
	  },
	  getzichanlist(){
		  $postAxios(api.getAssets, {}, (res) => {
		  	this.zichanlist = res;
		  });
	  },
	  sub(){
		  if (this.jine == '') {
		    this.$toast(this.$t("请输入金额"));
		    return false;
		  }
		  var that = this;
		  this.$toast.loading({
		  		duration: 0,
		  		message: "",
		  		forbidClick: true,
		  });
		  $postAxios(api.recharge, {
			  type:that.type,
			  amount:that.jine
		  }, (res) => {
		  	that.$toast.clear();
		    if (res.code == 0) {
		      that.$toast(that.$t(res.msg));
		      setTimeout(() => {
		        that.$router.push({
					name: "rechargeDetails",
		        });
		      }, 1000);
		    } else {
		      that.$toast(that.$t(res.msg));
		    }
		  });
	  },
	  
	  
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
    godetail() {
      this.$router.push({
        name: "rechargeDetails",
      });
    },
    go(type) {
      this.$router.push({
        name: "recharge-open",
        query: {
          name: type,
        },
      });
    },
	// kefu
	kefu(){
		location.href = this.kefu_url;
	},
    gorecharge(id) {
		if(id==100){
			window.location.href = this.config.sitename
		}
      if (id == 1) {
        window.location.href =
          "https://www.binance.com/en";
      }
      if (id == 2) {
        window.location.href = "https://www.okex.com/en";
      }
      if (id == 3) {
        window.location.href = "https://www.coincola.app/";
      }
      if (id == 4) {
        window.location.href = "https://changelly.com/";
      }
      if (id == 5) {
        window.location.href = "https://www.simplex.com/";
      }
      if (id == 6) {
        window.location.href = "https://www.moonpay.com/";
      }
      if (id == 7) {
        window.location.href = "https://paxful.com/en";
      }
      if (id == 8) {
        window.location.href = "https://www.huobi.com/en-us/";
      }
      if (id == 9) {
        window.location.href = "https://www.bitopro.com/";
      }
      if (id == 10) {
        window.location.href = "https://www.coinbase.com/";
      }
	  if (id == 11) {
	    window.location.href = "https://crypto.com/";
	  }
    },
  },
};
</script>

<style lang="scss" scoped>
	.navBar{
		background-color: transparent !important;
	}
.content {
  width: 100%;
  height: 100%;
  background-color: #21212b;
  .contentInner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tishi {
    width: 85%;
    margin: 15px auto;
    font-size: 12px;
    color: #333333;
  }
  .title {
    text-align: center;
    padding: 17px 0 0;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
  }
  .boxs {
    width: 95%;
    margin: 15px auto 0;
    display: flex;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 30px;
    .onebox {
      width: 47%;
      margin-bottom: 10px;
      background: #ffffff;
      border-radius: 15px;
      box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);
      .boxname {
        display: flex;
        align-items: center;
        padding: 14px 10px 14px;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        border-bottom: 0.5px solid #f1f3f4;
        .logo {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
        .nameimg {
          width: 100%;
          height: 30px;
        }
      }
      .buy {
        padding: 8px 14px 10px 0;
        text-align: right;
        font-size: 12px;
        color: #1c9fff;
      }
    }
  }
}

.top{
	width: 100%;
	height: 494px;
	display: flex;
	flex-direction: column;
	background: url('../../assets/img/dealBKG.png') no-repeat 50% -100px/745px;
	padding-top: 44px;
	box-sizing: border-box;
}
.one{
	text-align: center;
	color: #fff;
	margin: 31px 0 52px;
	
	.one1{
		font-size: 16px;
		font-weight: 500;
	}
	.one2{
		height: 39px;
		line-height: 50px;
		font-size: 14px;
		font-weight: 700;
		
		span{
			font-size: 29px;
			font-weight: 700;
		}
	}
}
.two{
	margin: 0 20px 41px;
	padding: 16px 11px;
	box-sizing: border-box;
	background: #262732;
	color: #fff;
	box-shadow: 0 7px 10px 1px #262732;
	border-radius: 5px;
	
	.two1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.two2{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
		font-size: 12px;
		
		div{
			font-size: 15px;
			margin-right: 15px;
			border-bottom: 2px solid transparent;
		}
		div.xuanzhong{
			border-bottom: 2px solid #edd33a;
			font-weight: 500;
			color: #edd33a;
		}
		
		input{
			background-color: transparent;
			border: none;
			font-size: 14px;
		}
		span{
			font-size: 24px;
			margin-right: 10px;
		}
	}
}
.btns{
	margin: 0 15px;
	color: rgb(0, 0, 0);
	background-color: rgb(237, 211, 58);
	font-size: 16px;
	text-align: center;
	border-radius: 3px;
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
}
.tips{
	margin: 15px;
	
	.red{
		color: red;
		font-size: 14px;
	}
	.tipscon{
		color: #fff;
		font-size: 14px;
	}
}
</style>